/*
 * @Description: 
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2024-09-02 22:27:54
 * @LastEditTime: 2024-09-03 21:26:54
 */
/*
 * @Description: 评论框及列表
 * @Autor: HuiSir<273250950@qq.com>
 * @Date: 2024-05-27 14:41:12
 * @LastEditTime: 2024-08-22 00:22:47
 */
import { ref, computed, provide } from "../utils/vue.esm.js"
import { loading1, loading2 } from "../utils/loading.js"
import { getCommentInfo, doGetComments } from "./hooks/useCommentsDataInit.js"
import useCommentListHandle from "./hooks/useCommentListHandle.js"
import CommentForm from "./inc/commentForm.js"
import CommentTreeList from "./inc/commentTreeList.js"

/* 由HuiSir（www.zuifengyun.com）制作开发，需要作者授权才能引用到其他主题 */

const template = /*html*/ `
<!-- 初始化加载中 -->
<div v-if="initLoading" class="loading">${loading1}</div>
<template v-else>
  <template v-if="postPasswordPequired">
    <p class="no-password">此文章受密码保护。请输入密码以查看评论。</p>
  </template>
  <template v-else>
    <CommentForm v-if="commentsOpen" 
      :requireNameEmail="requireNameEmail" 
      :haveComments="haveComments" 
      :commentsNumber="commentsNumber" 
      @createEnd="createCommentEnd" 
    />
    <template v-if="haveComments">
      <!-- 评论列表 -->
      <CommentTreeList 
        :myComments="computedComments" 
        :commentsNumber="commentsNumber"
        :requireNameEmail="requireNameEmail"
        :haveComments="haveComments"
        :comments="comments"
        :parentIds="[]"
        @closeMainCommentForm="commentsOpen = false"
        @openMainCommentForm="commentsOpen = true"
      />
      <!--评论分页 -->
      <div v-if="comments.length < commentsNumber" class="comment-nav">
        <button @click="loadMoreComments" :disabled="moreBtnLoading">
          <template v-if="moreBtnLoading">加载中${loading2}</template>
          <template v-else>更多评论</template>
        </button>
      </div >
    </template >
  </template >
</template >
  `
export default {
  components: { CommentForm, CommentTreeList },
  template,
  setup () {
    const postId = computed(() =>
      document.getElementById("Article").getAttribute("post-id")
    )

    // 初始化
    const initLoading = ref(true)
    // 评论配置项
    let commentConf = {}
    // 受保护的文章，需要密码才能查看评论
    const postPasswordPequired = ref(false)
    // 允许评论
    const commentsOpen = ref(false)
    // 需要登录才可发表评论
    const commentRegistration = ref(false)
    // 有无评论
    const haveComments = ref(false)
    // 必须填写名称和邮箱地址
    const requireNameEmail = ref(false)
    // 评论列表
    const comments = ref([])
    const commentsNumber = ref(0)
    const totalPage = ref(0)

    // 当前页
    const currPage = ref(1)

    getCommentInfo(postId.value, currPage.value).then((res) => {
      const { commentConfig, commentsRes } = res
      const {
        post_password_required,
        comments_open,
        get_comments_number,
        comment_registration,
        require_name_email,
        theme_path
      } = commentConfig

      // 更新配置项
      commentConf = commentConfig

      // 受保护文章
      postPasswordPequired.value = post_password_required
      // 允许评论
      commentsOpen.value = comments_open
      // 需要登录才可发表评论
      commentRegistration.value = comment_registration
      // 必须填写名称和邮箱地址
      requireNameEmail.value = require_name_email
      // 有无评论
      haveComments.value = get_comments_number > 0
      // 评论数量
      commentsNumber.value = get_comments_number

      // 列表
      // commentsRes.list.sort((a, b) => b.comment_ID - a.comment_ID);
      comments.value = commentsRes.list
      totalPage.value = commentsRes.totalPage
    }).finally(() => {
      // 关闭loading
      initLoading.value = false
    })

    const moreBtnLoading = ref(false)

    const loadMoreComments = () => {
      if (moreBtnLoading.value) {
        return
      }
      moreBtnLoading.value = true
      doGetComments(
        postId.value,
        currPage.value + 1,
      ).then((res) => {
        console.log(res)
        comments.value.push(...res.list)
        currPage.value++
        moreBtnLoading.value = false
      }).catch(() => {
        moreBtnLoading.value = false
      })
    }

    // 评论处理
    const computedComments = computed(() => useCommentListHandle(comments.value))

    // 回复
    const createCommentEnd = (comment) => {
      commentsNumber.value++
      comments.value.unshift(comment)
    }

    // 依赖注入：展开的待回复评论ID（打开回复表单）
    provide('showReplyFormId', ref(''))

    return {
      initLoading,
      moreBtnLoading,
      postPasswordPequired,
      commentsOpen,
      commentRegistration,
      requireNameEmail,
      commentsNumber,
      haveComments,
      comments,
      totalPage,
      computedComments,
      loadMoreComments,
      createCommentEnd,
    }
  },
}
